<template>
	<default-header-page-layout ref="page" title="设备报警" >
		<view class="page-frame notices-page-container" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<view class="container-top-tabs">
				<view v-for="(item,index) in tabs" :key="'tab-item-'+index" class="tab-item" :class="[item.value===activeTab?'active':'']" @tap.stop="onChangeActiveTab(item.value)">{{item.label}}</view>
			</view>
			<scroll-view class="notices-list" :scroll-y="true">
				<view class="notice-list-item">
					<view class="item-left">
						<view class="circle-no">1</view>
						<u-tag text="关闭" plain size="mini" type="info" />
					</view>
					<view class="item-context">
						<view class="item-row">
							<view class="label">报警设备：</view>
							<view class="content auto-wrap">连杆衬套精整专机</view>
						</view>
						<view class="item-row">
							<view class="label">报警时间：</view>
							<view class="content auto-wrap">2022.3.5 12:00:52</view>
						</view>
						<view class="item-row">
							<view class="label">错误代码：</view>
							<view class="content auto-wrap">xxx001</view>
						</view>
						<view class="item-row">
							<view class="label">错误信息：</view>
							<view class="content auto-wrap">昂大哥大使馆的季后赛·哈哈沙嗲忽地啊皇帝和方法返回科技啊是覅uahfihfaiuh股股份规划</view>
						</view>
					</view>
				</view>
				
				<view class="notice-list-item">
					<view class="item-left">
						<view class="circle-no">99</view>
						<u-tag text="挂起" plain size="mini" type="error" />
					</view>
					<view class="item-context">
						<view class="item-row">
							<view class="label">报警设备：</view>
							<view class="content auto-wrap">连杆衬套精整专机</view>
						</view>
						<view class="item-row">
							<view class="label">报警时间：</view>
							<view class="content auto-wrap">2022.3.5 12:00:52</view>
						</view>
						<view class="item-row">
							<view class="label">错误代码：</view>
							<view class="content auto-wrap">xxx003</view>
						</view>
						<view class="item-row">
							<view class="label">错误信息：</view>
							<view class="content auto-wrap">昂大哥大使馆的季后赛·哈哈沙嗲忽地啊皇帝和方法返回科技啊是覅uahfihfaiuh股股份规划</view>
						</view>
					</view>
				</view>
				
				<view class="no-more-text-row">不能更多了</view>
			</scroll-view>
		</view>
	</default-header-page-layout>
</template>

<script>
import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
let initInterVal = null;
export default {
	name:'noticesPage',
	components:{DefaultHeaderPageLayout},
	data(){
		return {
			pageBodyHeight:0,
			tabs:[
				{value:0,label:'全部'},
				{value:1,label:'挂起'},
				{value:2,label:'关闭'}
			],
			activeTab:0,
			maxListNumber:99
		}
	},
	methods:{
		onChangeActiveTab(val){
			this.activeTab = val
		},
		/* 页面初始化获取页面body高度的定时器 */
		startInitInterval(callback){
			initInterVal = setInterval(()=>{
				if (this.pageBodyHeight) {
					this.clearInitInterval()
					callback && callback()
				} else {
					this.pageBodyHeight = this.$refs.page.getBodyHeight()
				}
			},200)
		},
		/* 清除定时器 */
		clearInitInterval(){
			try{
				clearInterval(initInterVal)
				initInterVal = null
			}catch(e){
				//TODO handle the exception
			}
		}
	},
	onReady(){
		this.startInitInterval(()=>{
			/* 页面初始化后需要执行的代码在这边调用 */
		})
	},
	onUnload(){
		this.clearInitInterval()
	}
}
</script>

<style scoped lang="scss">
.notices-page-container{
	$topSize:80rpx;
	box-sizing: border-box;
	padding-top: $topSize;
	.container-top-tabs{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: $topSize;
		box-sizing: border-box;
		background-color: $uni-bg-color;
		border-bottom: 2rpx solid $uni-border-color;
		display: flex;
		.tab-item{
			width: 33.3333%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 36rpx;
			&.active{
				color: $u-primary;
			}
		}
	}
	.notices-list{
		height: 100%;
		.notice-list-item{
			border-bottom: 2rpx solid $uni-border-color;
			margin-bottom: 10rpx;
			background-color: $uni-bg-color;
			box-shadow: 0px 2rpx 6rpx rgba(34, 25, 25, 0.2);
			display: flex;
			&:last-child{
				border-bottom: 0;
			}
		}
		.item-left{
			width: 100rpx;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 10rpx;
			.circle-no{
				$circleNoSize:50rpx;
				min-width: $circleNoSize;
				height: $circleNoSize;
				background-color: $u-primary;
				color: $uni-bg-color;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 10rpx;
			}
		}
		.item-context{
			flex-grow: 1;
			.item-row{
				display: flex;
				&>.label{
					flex-shrink: 0;
					color: $u-tips-color;
					width: 144rpx;
				}
				&>.content{
					flex-grow: 1;
					color: $u-content-color;
				}
			}
		}
	}
}
</style>